<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Icon（Ant的实底风格）</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
	<script src="../static/js/icons_diy.js"></script>
	<script src="../static/js/icons_antd.js"></script>
</head>
<style type="text/css">
.ant-btn{
	margin-left: 20px;
}
.aut-icon{
	height: 2em;
	width: 2em;
	/* color: red; */
}
.ant-modal-confirm-body>.ant-modal-confirm-title{
	flex: auto !important;
	margin-left: 8px;
}
.icon-demo{
	display: inline-block;
	background-color: #c6e2ff;
	border: 1px solid gray;
	padding: 4px 30px;
	margin: 8px;
}
.icon-container{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.icon-cell{
	display: flex;
	flex-direction: column;
	width: 170px;
	height: 90px;
	border: 1px solid lightgray;
	padding: 8px 0;
}
.icon-icon{
	margin: auto;
}
.icon-text{
	margin: auto;
	color: gray;
	font-size: 12px;
}
.label{
	margin: 12px;
	font-weight: bold;
}
</style>
<body>

<div id="app">
	<a-divider class="a-divi" orientation="left">探索使用icons_antd.js（探索成功，推荐使用）</a-divider><!-- =============================================================== -->
	<p class="desc">其实就是把antd的图标注入到icons_antd.js文件中，用icon_el的方式调用就可以了</p>
	<a-button @click="confirm4">Confirm</a-button>
	<add-location width="80" height="40"></add-location>
	<aim width="80" height="40"></aim>
	<zoom-out width="80" height="40"></zoom-out>
	<up-circle-two-tone width="80" height="40"></up-circle-two-tone>
	<right-square-two-tone width="80" height="40"></right-square-two-tone>

	<a-divider class="a-divi" orientation="left">实底风格</a-divider><!-- =============================================================== -->
	<p class="desc" style="margin-top: 12px;">Antd实底风格图标</p>
	<a-affix :offset-top="top">
		<a href="icon_ant1.html"><a-button>线框风格</a-button></a>
		<a href="icon_ant2.html"><a-button type="primary">实底风格</a-button></a>
		<a href="icon_ant3.html"><a-button>双色风格</a-button></a>
		<div class="icon-demo"><p v-text="iconDemo" style="margin-top: 1em;"></p></div>
	</a-affix>
	
	<h4 class="label">方向性图标</h4>
	<div class="icon-container">
		<div class="icon-cell" @click="clickIcon('step-backward-filled')"><div class="icon-icon"><step-backward-filled class="aut-icon"></step-backward-filled></div><div class="icon-text">StepBackwardFilled</div></div>
		<div class="icon-cell" @click="clickIcon('step-forward-filled')"><div class="icon-icon"><step-forward-filled class="aut-icon"></step-forward-filled></div><div class="icon-text">StepForwardFilled</div></div>
		<div class="icon-cell" @click="clickIcon('fast-backward-filled')"><div class="icon-icon"><fast-backward-filled class="aut-icon"></fast-backward-filled></div><div class="icon-text">FastBackwardFilled</div></div>
		<div class="icon-cell" @click="clickIcon('fast-forward-filled')"><div class="icon-icon"><fast-forward-filled class="aut-icon"></fast-forward-filled></div><div class="icon-text">FastForwardFilled</div></div>
		<div class="icon-cell" @click="clickIcon('caret-up-filled')"><div class="icon-icon"><caret-up-filled class="aut-icon"></caret-up-filled></div><div class="icon-text">CaretUpFilled</div></div>
		<div class="icon-cell" @click="clickIcon('caret-down-filled')"><div class="icon-icon"><caret-down-filled class="aut-icon"></caret-down-filled></div><div class="icon-text">CaretDownFilled</div></div>
		<div class="icon-cell" @click="clickIcon('caret-left-filled')"><div class="icon-icon"><caret-left-filled class="aut-icon"></caret-left-filled></div><div class="icon-text">CaretLeftFilled</div></div>
		<div class="icon-cell" @click="clickIcon('caret-right-filled')"><div class="icon-icon"><caret-right-filled class="aut-icon"></caret-right-filled></div><div class="icon-text">CaretRightFilled</div></div>
		<div class="icon-cell" @click="clickIcon('up-circle-filled')"><div class="icon-icon"><up-circle-filled class="aut-icon"></up-circle-filled></div><div class="icon-text">UpCircleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('down-circle-filled')"><div class="icon-icon"><down-circle-filled class="aut-icon"></down-circle-filled></div><div class="icon-text">DownCircleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('left-circle-filled')"><div class="icon-icon"><left-circle-filled class="aut-icon"></left-circle-filled></div><div class="icon-text">LeftCircleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('right-circle-filled')"><div class="icon-icon"><right-circle-filled class="aut-icon"></right-circle-filled></div><div class="icon-text">RightCircleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('forward-filled')"><div class="icon-icon"><forward-filled class="aut-icon"></forward-filled></div><div class="icon-text">ForwardFilled</div></div>
		<div class="icon-cell" @click="clickIcon('backward-filled')"><div class="icon-icon"><backward-filled class="aut-icon"></backward-filled></div><div class="icon-text">BackwardFilled</div></div>
		<div class="icon-cell" @click="clickIcon('play-circle-filled')"><div class="icon-icon"><play-circle-filled class="aut-icon"></play-circle-filled></div><div class="icon-text">PlayCircleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('up-square-filled')"><div class="icon-icon"><up-square-filled class="aut-icon"></up-square-filled></div><div class="icon-text">UpSquareFilled</div></div>
		<div class="icon-cell" @click="clickIcon('down-square-filled')"><div class="icon-icon"><down-square-filled class="aut-icon"></down-square-filled></div><div class="icon-text">DownSquareFilled</div></div>
		<div class="icon-cell" @click="clickIcon('left-square-filled')"><div class="icon-icon"><left-square-filled class="aut-icon"></left-square-filled></div><div class="icon-text">LeftSquareFilled</div></div>
		<div class="icon-cell" @click="clickIcon('right-square-filled')"><div class="icon-icon"><right-square-filled class="aut-icon"></right-square-filled></div><div class="icon-text">RightSquareFilled</div></div>
	</div>
	
	<h4 class="label">提示建议性图标</h4>
	<div class="icon-container">
		<div class="icon-cell" @click="clickIcon('question-circle-filled')"><div class="icon-icon"><question-circle-filled class="aut-icon"></question-circle-filled></div><div class="icon-text">QuestionCircleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('plus-circle-filled')"><div class="icon-icon"><plus-circle-filled class="aut-icon"></plus-circle-filled></div><div class="icon-text">PlusCircleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('pause-circle-filled')"><div class="icon-icon"><pause-circle-filled class="aut-icon"></pause-circle-filled></div><div class="icon-text">PauseCircleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('minus-circle-filled')"><div class="icon-icon"><minus-circle-filled class="aut-icon"></minus-circle-filled></div><div class="icon-text">MinusCircleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('plus-square-filled')"><div class="icon-icon"><plus-square-filled class="aut-icon"></plus-square-filled></div><div class="icon-text">PlusSquareFilled</div></div>
		<div class="icon-cell" @click="clickIcon('minus-square-filled')"><div class="icon-icon"><minus-square-filled class="aut-icon"></minus-square-filled></div><div class="icon-text">MinusSquareFilled</div></div>
		<div class="icon-cell" @click="clickIcon('info-circle-filled')"><div class="icon-icon"><info-circle-filled class="aut-icon"></info-circle-filled></div><div class="icon-text">InfoCircleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('exclamation-circle-filled')"><div class="icon-icon"><exclamation-circle-filled class="aut-icon"></exclamation-circle-filled></div><div class="icon-text">ExclamationCircleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('close-circle-filled')"><div class="icon-icon"><close-circle-filled class="aut-icon"></close-circle-filled></div><div class="icon-text">CloseCircleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('close-square-filled')"><div class="icon-icon"><close-square-filled class="aut-icon"></close-square-filled></div><div class="icon-text">CloseSquareFilled</div></div>
		<div class="icon-cell" @click="clickIcon('check-circle-filled')"><div class="icon-icon"><check-circle-filled class="aut-icon"></check-circle-filled></div><div class="icon-text">CheckCircleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('check-square-filled')"><div class="icon-icon"><check-square-filled class="aut-icon"></check-square-filled></div><div class="icon-text">CheckSquareFilled</div></div>
		<div class="icon-cell" @click="clickIcon('clock-circle-filled')"><div class="icon-icon"><clock-circle-filled class="aut-icon"></clock-circle-filled></div><div class="icon-text">ClockCircleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('warning-filled')"><div class="icon-icon"><warning-filled class="aut-icon"></warning-filled></div><div class="icon-text">WarningFilled</div></div>
		<div class="icon-cell" @click="clickIcon('stop-filled')"><div class="icon-icon"><stop-filled class="aut-icon"></stop-filled></div><div class="icon-text">StopFilled</div></div>
	</div>
	
	<h4 class="label">编辑类图标</h4>
	<div class="icon-container">
		<div class="icon-cell" @click="clickIcon('edit-filled')"><div class="icon-icon"><edit-filled class="aut-icon"></edit-filled></div><div class="icon-text">EditFilled</div></div>
		<div class="icon-cell" @click="clickIcon('copy-filled')"><div class="icon-icon"><copy-filled class="aut-icon"></copy-filled></div><div class="icon-text">CopyFilled</div></div>
		<div class="icon-cell" @click="clickIcon('delete-filled')"><div class="icon-icon"><delete-filled class="aut-icon"></delete-filled></div><div class="icon-text">DeleteFilled</div></div>
		<div class="icon-cell" @click="clickIcon('snippets-filled')"><div class="icon-icon"><snippets-filled class="aut-icon"></snippets-filled></div><div class="icon-text">SnippetsFilled</div></div>
		<div class="icon-cell" @click="clickIcon('diff-filled')"><div class="icon-icon"><diff-filled class="aut-icon"></diff-filled></div><div class="icon-text">DiffFilled</div></div>
		<div class="icon-cell" @click="clickIcon('highlight-filled')"><div class="icon-icon"><highlight-filled class="aut-icon"></highlight-filled></div><div class="icon-text">HighlightFilled</div></div>
	</div>
	
	<h4 class="label">数据类图标</h4>
	<div class="icon-container">
		<div class="icon-cell" @click="clickIcon('pie-chart-filled')"><div class="icon-icon"><pie-chart-filled class="aut-icon"></pie-chart-filled></div><div class="icon-text">PieChartFilled</div></div>
		<div class="icon-cell" @click="clickIcon('box-plot-filled')"><div class="icon-icon"><box-plot-filled class="aut-icon"></box-plot-filled></div><div class="icon-text">BoxPlotFilled</div></div>
		<div class="icon-cell" @click="clickIcon('fund-filled')"><div class="icon-icon"><fund-filled class="aut-icon"></fund-filled></div><div class="icon-text">FundFilled</div></div>
		<div class="icon-cell" @click="clickIcon('sliders-filled')"><div class="icon-icon"><sliders-filled class="aut-icon"></sliders-filled></div><div class="icon-text">SlidersFilled</div></div>
	</div>
	
	<h4 class="label">品牌和标识</h4>
	<div class="icon-container">
		<div class="icon-cell" @click="clickIcon('android-filled')"><div class="icon-icon"><android-filled class="aut-icon"></android-filled></div><div class="icon-text">AndroidFilled</div></div>
		<div class="icon-cell" @click="clickIcon('apple-filled')"><div class="icon-icon"><apple-filled class="aut-icon"></apple-filled></div><div class="icon-text">AppleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('windows-filled')"><div class="icon-icon"><windows-filled class="aut-icon"></windows-filled></div><div class="icon-text">WindowsFilled</div></div>
		<div class="icon-cell" @click="clickIcon('chrome-filled')"><div class="icon-icon"><chrome-filled class="aut-icon"></chrome-filled></div><div class="icon-text">ChromeFilled</div></div>
		<div class="icon-cell" @click="clickIcon('github-filled')"><div class="icon-icon"><github-filled class="aut-icon"></github-filled></div><div class="icon-text">GithubFilled</div></div>
		<div class="icon-cell" @click="clickIcon('aliwangwang-filled')"><div class="icon-icon"><aliwangwang-filled class="aut-icon"></aliwangwang-filled></div><div class="icon-text">AliwangwangFilled</div></div>
		<div class="icon-cell" @click="clickIcon('weibo-square-filled')"><div class="icon-icon"><weibo-square-filled class="aut-icon"></weibo-square-filled></div><div class="icon-text">WeiboSquareFilled</div></div>
		<div class="icon-cell" @click="clickIcon('weibo-circle-filled')"><div class="icon-icon"><weibo-circle-filled class="aut-icon"></weibo-circle-filled></div><div class="icon-text">WeiboCircleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('taobao-circle-filled')"><div class="icon-icon"><taobao-circle-filled class="aut-icon"></taobao-circle-filled></div><div class="icon-text">TaobaoCircleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('html-5-filled')"><div class="icon-icon"><html-5-filled class="aut-icon"></html-5-filled></div><div class="icon-text">Html5Filled</div></div>
		<div class="icon-cell" @click="clickIcon('wechat-filled')"><div class="icon-icon"><wechat-filled class="aut-icon"></wechat-filled></div><div class="icon-text">WechatFilled</div></div>
		<div class="icon-cell" @click="clickIcon('youtube-filled')"><div class="icon-icon"><youtube-filled class="aut-icon"></youtube-filled></div><div class="icon-text">YoutubeFilled</div></div>
		<div class="icon-cell" @click="clickIcon('alipay-circle-filled')"><div class="icon-icon"><alipay-circle-filled class="aut-icon"></alipay-circle-filled></div><div class="icon-text">AlipayCircleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('skype-filled')"><div class="icon-icon"><skype-filled class="aut-icon"></skype-filled></div><div class="icon-text">SkypeFilled</div></div>
		<div class="icon-cell" @click="clickIcon('gitlab-filled')"><div class="icon-icon"><gitlab-filled class="aut-icon"></gitlab-filled></div><div class="icon-text">GitlabFilled</div></div>
		<div class="icon-cell" @click="clickIcon('linkedin-filled')"><div class="icon-icon"><linkedin-filled class="aut-icon"></linkedin-filled></div><div class="icon-text">LinkedinFilled</div></div>
		<div class="icon-cell" @click="clickIcon('facebook-filled')"><div class="icon-icon"><facebook-filled class="aut-icon"></facebook-filled></div><div class="icon-text">FacebookFilled</div></div>
		<div class="icon-cell" @click="clickIcon('code-sandbox-circle-filled')"><div class="icon-icon"><code-sandbox-circle-filled class="aut-icon"></code-sandbox-circle-filled></div><div class="icon-text">CodeSandboxCircleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('codepen-circle-filled')"><div class="icon-icon"><codepen-circle-filled class="aut-icon"></codepen-circle-filled></div><div class="icon-text">CodepenCircleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('slack-square-filled')"><div class="icon-icon"><slack-square-filled class="aut-icon"></slack-square-filled></div><div class="icon-text">SlackSquareFilled</div></div>
		<div class="icon-cell" @click="clickIcon('behance-square-filled')"><div class="icon-icon"><behance-square-filled class="aut-icon"></behance-square-filled></div><div class="icon-text">BehanceSquareFilled</div></div>
		<div class="icon-cell" @click="clickIcon('dribbble-square-filled')"><div class="icon-icon"><dribbble-square-filled class="aut-icon"></dribbble-square-filled></div><div class="icon-text">DribbbleSquareFilled</div></div>
		<div class="icon-cell" @click="clickIcon('instagram-filled')"><div class="icon-icon"><instagram-filled class="aut-icon"></instagram-filled></div><div class="icon-text">InstagramFilled</div></div>
		<div class="icon-cell" @click="clickIcon('yuque-filled')"><div class="icon-icon"><yuque-filled class="aut-icon"></yuque-filled></div><div class="icon-text">YuqueFilled</div></div>
		<div class="icon-cell" @click="clickIcon('yahoo-filled')"><div class="icon-icon"><yahoo-filled class="aut-icon"></yahoo-filled></div><div class="icon-text">YahooFilled</div></div>
	</div>
	
	<h4 class="label">网站通用图标</h4>
	<div class="icon-container">
		<div class="icon-cell" @click="clickIcon('account-book-filled')"><div class="icon-icon"><account-book-filled class="aut-icon"></account-book-filled></div><div class="icon-text">AccountBookFilled</div></div>
		<div class="icon-cell" @click="clickIcon('alert-filled')"><div class="icon-icon"><alert-filled class="aut-icon"></alert-filled></div><div class="icon-text">AlertFilled</div></div>
		<div class="icon-cell" @click="clickIcon('alipay-square-filled')"><div class="icon-icon"><alipay-square-filled class="aut-icon"></alipay-square-filled></div><div class="icon-text">AlipaySquareFilled</div></div>
		<div class="icon-cell" @click="clickIcon('amazon-circle-filled')"><div class="icon-icon"><amazon-circle-filled class="aut-icon"></amazon-circle-filled></div><div class="icon-text">AmazonCircleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('amazon-square-filled')"><div class="icon-icon"><amazon-square-filled class="aut-icon"></amazon-square-filled></div><div class="icon-text">AmazonSquareFilled</div></div>
		<div class="icon-cell" @click="clickIcon('api-filled')"><div class="icon-icon"><api-filled class="aut-icon"></api-filled></div><div class="icon-text">ApiFilled</div></div>
		<div class="icon-cell" @click="clickIcon('appstore-filled')"><div class="icon-icon"><appstore-filled class="aut-icon"></appstore-filled></div><div class="icon-text">AppstoreFilled</div></div>
		<div class="icon-cell" @click="clickIcon('audio-filled')"><div class="icon-icon"><audio-filled class="aut-icon"></audio-filled></div><div class="icon-text">AudioFilled</div></div>
		<div class="icon-cell" @click="clickIcon('bank-filled')"><div class="icon-icon"><bank-filled class="aut-icon"></bank-filled></div><div class="icon-text">BankFilled</div></div>
		<div class="icon-cell" @click="clickIcon('behance-circle-filled')"><div class="icon-icon"><behance-circle-filled class="aut-icon"></behance-circle-filled></div><div class="icon-text">BehanceCircleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('bell-filled')"><div class="icon-icon"><bell-filled class="aut-icon"></bell-filled></div><div class="icon-text">BellFilled</div></div>
		<div class="icon-cell" @click="clickIcon('book-filled')"><div class="icon-icon"><book-filled class="aut-icon"></book-filled></div><div class="icon-text">BookFilled</div></div>
		<div class="icon-cell" @click="clickIcon('bug-filled')"><div class="icon-icon"><bug-filled class="aut-icon"></bug-filled></div><div class="icon-text">BugFilled</div></div>
		<div class="icon-cell" @click="clickIcon('build-filled')"><div class="icon-icon"><build-filled class="aut-icon"></build-filled></div><div class="icon-text">BuildFilled</div></div>
		<div class="icon-cell" @click="clickIcon('bulb-filled')"><div class="icon-icon"><bulb-filled class="aut-icon"></bulb-filled></div><div class="icon-text">BulbFilled</div></div>
		<div class="icon-cell" @click="clickIcon('calculator-filled')"><div class="icon-icon"><calculator-filled class="aut-icon"></calculator-filled></div><div class="icon-text">CalculatorFilled</div></div>
		<div class="icon-cell" @click="clickIcon('calendar-filled')"><div class="icon-icon"><calendar-filled class="aut-icon"></calendar-filled></div><div class="icon-text">CalendarFilled</div></div>
		<div class="icon-cell" @click="clickIcon('camera-filled')"><div class="icon-icon"><camera-filled class="aut-icon"></camera-filled></div><div class="icon-text">CameraFilled</div></div>
		<div class="icon-cell" @click="clickIcon('car-filled')"><div class="icon-icon"><car-filled class="aut-icon"></car-filled></div><div class="icon-text">CarFilled</div></div>
		<div class="icon-cell" @click="clickIcon('carry-out-filled')"><div class="icon-icon"><carry-out-filled class="aut-icon"></carry-out-filled></div><div class="icon-text">CarryOutFilled</div></div>
		<div class="icon-cell" @click="clickIcon('ci-circle-filled')"><div class="icon-icon"><ci-circle-filled class="aut-icon"></ci-circle-filled></div><div class="icon-text">CiCircleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('cloud-filled')"><div class="icon-icon"><cloud-filled class="aut-icon"></cloud-filled></div><div class="icon-text">CloudFilled</div></div>
		<div class="icon-cell" @click="clickIcon('code-filled')"><div class="icon-icon"><code-filled class="aut-icon"></code-filled></div><div class="icon-text">CodeFilled</div></div>
		<div class="icon-cell" @click="clickIcon('code-sandbox-square-filled')"><div class="icon-icon"><code-sandbox-square-filled class="aut-icon"></code-sandbox-square-filled></div><div class="icon-text">CodeSandboxSquareFilled</div></div>
		<div class="icon-cell" @click="clickIcon('codepen-square-filled')"><div class="icon-icon"><codepen-square-filled class="aut-icon"></codepen-square-filled></div><div class="icon-text">CodepenSquareFilled</div></div>
		<div class="icon-cell" @click="clickIcon('compass-filled')"><div class="icon-icon"><compass-filled class="aut-icon"></compass-filled></div><div class="icon-text">CompassFilled</div></div>
		<div class="icon-cell" @click="clickIcon('contacts-filled')"><div class="icon-icon"><contacts-filled class="aut-icon"></contacts-filled></div><div class="icon-text">ContactsFilled</div></div>
		<div class="icon-cell" @click="clickIcon('container-filled')"><div class="icon-icon"><container-filled class="aut-icon"></container-filled></div><div class="icon-text">ContainerFilled</div></div>
		<div class="icon-cell" @click="clickIcon('control-filled')"><div class="icon-icon"><control-filled class="aut-icon"></control-filled></div><div class="icon-text">ControlFilled</div></div>
		<div class="icon-cell" @click="clickIcon('copyright-circle-filled')"><div class="icon-icon"><copyright-circle-filled class="aut-icon"></copyright-circle-filled></div><div class="icon-text">CopyrightCircleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('credit-card-filled')"><div class="icon-icon"><credit-card-filled class="aut-icon"></credit-card-filled></div><div class="icon-text">CreditCardFilled</div></div>
		<div class="icon-cell" @click="clickIcon('crown-filled')"><div class="icon-icon"><crown-filled class="aut-icon"></crown-filled></div><div class="icon-text">CrownFilled</div></div>
		<div class="icon-cell" @click="clickIcon('customer-service-filled')"><div class="icon-icon"><customer-service-filled class="aut-icon"></customer-service-filled></div><div class="icon-text">CustomerServiceFilled</div></div>
		<div class="icon-cell" @click="clickIcon('dashboard-filled')"><div class="icon-icon"><dashboard-filled class="aut-icon"></dashboard-filled></div><div class="icon-text">DashboardFilled</div></div>
		<div class="icon-cell" @click="clickIcon('database-filled')"><div class="icon-icon"><database-filled class="aut-icon"></database-filled></div><div class="icon-text">DatabaseFilled</div></div>
		<div class="icon-cell" @click="clickIcon('dingtalk-circle-filled')"><div class="icon-icon"><dingtalk-circle-filled class="aut-icon"></dingtalk-circle-filled></div><div class="icon-text">DingtalkCircleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('dingtalk-square-filled')"><div class="icon-icon"><dingtalk-square-filled class="aut-icon"></dingtalk-square-filled></div><div class="icon-text">DingtalkSquareFilled</div></div>
		<div class="icon-cell" @click="clickIcon('dislike-filled')"><div class="icon-icon"><dislike-filled class="aut-icon"></dislike-filled></div><div class="icon-text">DislikeFilled</div></div>
		<div class="icon-cell" @click="clickIcon('dollar-circle-filled')"><div class="icon-icon"><dollar-circle-filled class="aut-icon"></dollar-circle-filled></div><div class="icon-text">DollarCircleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('dribbble-circle-filled')"><div class="icon-icon"><dribbble-circle-filled class="aut-icon"></dribbble-circle-filled></div><div class="icon-text">DribbbleCircleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('dropbox-circle-filled')"><div class="icon-icon"><dropbox-circle-filled class="aut-icon"></dropbox-circle-filled></div><div class="icon-text">DropboxCircleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('dropbox-square-filled')"><div class="icon-icon"><dropbox-square-filled class="aut-icon"></dropbox-square-filled></div><div class="icon-text">DropboxSquareFilled</div></div>
		<div class="icon-cell" @click="clickIcon('environment-filled')"><div class="icon-icon"><environment-filled class="aut-icon"></environment-filled></div><div class="icon-text">EnvironmentFilled</div></div>
		<div class="icon-cell" @click="clickIcon('euro-circle-filled')"><div class="icon-icon"><euro-circle-filled class="aut-icon"></euro-circle-filled></div><div class="icon-text">EuroCircleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('experiment-filled')"><div class="icon-icon"><experiment-filled class="aut-icon"></experiment-filled></div><div class="icon-text">ExperimentFilled</div></div>
		<div class="icon-cell" @click="clickIcon('eye-filled')"><div class="icon-icon"><eye-filled class="aut-icon"></eye-filled></div><div class="icon-text">EyeFilled</div></div>
		<div class="icon-cell" @click="clickIcon('eye-invisible-filled')"><div class="icon-icon"><eye-invisible-filled class="aut-icon"></eye-invisible-filled></div><div class="icon-text">EyeInvisibleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('file-add-filled')"><div class="icon-icon"><file-add-filled class="aut-icon"></file-add-filled></div><div class="icon-text">FileAddFilled</div></div>
		<div class="icon-cell" @click="clickIcon('file-excel-filled')"><div class="icon-icon"><file-excel-filled class="aut-icon"></file-excel-filled></div><div class="icon-text">FileExcelFilled</div></div>
		<div class="icon-cell" @click="clickIcon('file-exclamation-filled')"><div class="icon-icon"><file-exclamation-filled class="aut-icon"></file-exclamation-filled></div><div class="icon-text">FileExclamationFilled</div></div>
		<div class="icon-cell" @click="clickIcon('file-filled')"><div class="icon-icon"><file-filled class="aut-icon"></file-filled></div><div class="icon-text">FileFilled</div></div>
		<div class="icon-cell" @click="clickIcon('file-image-filled')"><div class="icon-icon"><file-image-filled class="aut-icon"></file-image-filled></div><div class="icon-text">FileImageFilled</div></div>
		<div class="icon-cell" @click="clickIcon('file-markdown-filled')"><div class="icon-icon"><file-markdown-filled class="aut-icon"></file-markdown-filled></div><div class="icon-text">FileMarkdownFilled</div></div>
		<div class="icon-cell" @click="clickIcon('file-pdf-filled')"><div class="icon-icon"><file-pdf-filled class="aut-icon"></file-pdf-filled></div><div class="icon-text">FilePdfFilled</div></div>
		<div class="icon-cell" @click="clickIcon('file-ppt-filled')"><div class="icon-icon"><file-ppt-filled class="aut-icon"></file-ppt-filled></div><div class="icon-text">FilePptFilled</div></div>
		<div class="icon-cell" @click="clickIcon('file-text-filled')"><div class="icon-icon"><file-text-filled class="aut-icon"></file-text-filled></div><div class="icon-text">FileTextFilled</div></div>
		<div class="icon-cell" @click="clickIcon('file-unknown-filled')"><div class="icon-icon"><file-unknown-filled class="aut-icon"></file-unknown-filled></div><div class="icon-text">FileUnknownFilled</div></div>
		<div class="icon-cell" @click="clickIcon('file-word-filled')"><div class="icon-icon"><file-word-filled class="aut-icon"></file-word-filled></div><div class="icon-text">FileWordFilled</div></div>
		<div class="icon-cell" @click="clickIcon('file-zip-filled')"><div class="icon-icon"><file-zip-filled class="aut-icon"></file-zip-filled></div><div class="icon-text">FileZipFilled</div></div>
		<div class="icon-cell" @click="clickIcon('filter-filled')"><div class="icon-icon"><filter-filled class="aut-icon"></filter-filled></div><div class="icon-text">FilterFilled</div></div>
		<div class="icon-cell" @click="clickIcon('fire-filled')"><div class="icon-icon"><fire-filled class="aut-icon"></fire-filled></div><div class="icon-text">FireFilled</div></div>
		<div class="icon-cell" @click="clickIcon('flag-filled')"><div class="icon-icon"><flag-filled class="aut-icon"></flag-filled></div><div class="icon-text">FlagFilled</div></div>
		<div class="icon-cell" @click="clickIcon('folder-add-filled')"><div class="icon-icon"><folder-add-filled class="aut-icon"></folder-add-filled></div><div class="icon-text">FolderAddFilled</div></div>
		<div class="icon-cell" @click="clickIcon('folder-filled')"><div class="icon-icon"><folder-filled class="aut-icon"></folder-filled></div><div class="icon-text">FolderFilled</div></div>
		<div class="icon-cell" @click="clickIcon('folder-open-filled')"><div class="icon-icon"><folder-open-filled class="aut-icon"></folder-open-filled></div><div class="icon-text">FolderOpenFilled</div></div>
		<div class="icon-cell" @click="clickIcon('format-painter-filled')"><div class="icon-icon"><format-painter-filled class="aut-icon"></format-painter-filled></div><div class="icon-text">FormatPainterFilled</div></div>
		<div class="icon-cell" @click="clickIcon('frown-filled')"><div class="icon-icon"><frown-filled class="aut-icon"></frown-filled></div><div class="icon-text">FrownFilled</div></div>
		<div class="icon-cell" @click="clickIcon('funnel-plot-filled')"><div class="icon-icon"><funnel-plot-filled class="aut-icon"></funnel-plot-filled></div><div class="icon-text">FunnelPlotFilled</div></div>
		<div class="icon-cell" @click="clickIcon('gift-filled')"><div class="icon-icon"><gift-filled class="aut-icon"></gift-filled></div><div class="icon-text">GiftFilled</div></div>
		<div class="icon-cell" @click="clickIcon('gold-filled')"><div class="icon-icon"><gold-filled class="aut-icon"></gold-filled></div><div class="icon-text">GoldFilled</div></div>
		<div class="icon-cell" @click="clickIcon('golden-filled')"><div class="icon-icon"><golden-filled class="aut-icon"></golden-filled></div><div class="icon-text">GoldenFilled</div></div>
		<div class="icon-cell" @click="clickIcon('google-circle-filled')"><div class="icon-icon"><google-circle-filled class="aut-icon"></google-circle-filled></div><div class="icon-text">GoogleCircleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('google-plus-circle-filled')"><div class="icon-icon"><google-plus-circle-filled class="aut-icon"></google-plus-circle-filled></div><div class="icon-text">GooglePlusCircleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('google-plus-square-filled')"><div class="icon-icon"><google-plus-square-filled class="aut-icon"></google-plus-square-filled></div><div class="icon-text">GooglePlusSquareFilled</div></div>
		<div class="icon-cell" @click="clickIcon('google-square-filled')"><div class="icon-icon"><google-square-filled class="aut-icon"></google-square-filled></div><div class="icon-text">GoogleSquareFilled</div></div>
		<div class="icon-cell" @click="clickIcon('hdd-filled')"><div class="icon-icon"><hdd-filled class="aut-icon"></hdd-filled></div><div class="icon-text">HddFilled</div></div>
		<div class="icon-cell" @click="clickIcon('heart-filled')"><div class="icon-icon"><heart-filled class="aut-icon"></heart-filled></div><div class="icon-text">HeartFilled</div></div>
		<div class="icon-cell" @click="clickIcon('home-filled')"><div class="icon-icon"><home-filled class="aut-icon"></home-filled></div><div class="icon-text">HomeFilled</div></div>
		<div class="icon-cell" @click="clickIcon('hourglass-filled')"><div class="icon-icon"><hourglass-filled class="aut-icon"></hourglass-filled></div><div class="icon-text">HourglassFilled</div></div>
		<div class="icon-cell" @click="clickIcon('idcard-filled')"><div class="icon-icon"><idcard-filled class="aut-icon"></idcard-filled></div><div class="icon-text">IdcardFilled</div></div>
		<div class="icon-cell" @click="clickIcon('ie-circle-filled')"><div class="icon-icon"><ie-circle-filled class="aut-icon"></ie-circle-filled></div><div class="icon-text">IeCircleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('ie-square-filled')"><div class="icon-icon"><ie-square-filled class="aut-icon"></ie-square-filled></div><div class="icon-text">IeSquareFilled</div></div>
		<div class="icon-cell" @click="clickIcon('insurance-filled')"><div class="icon-icon"><insurance-filled class="aut-icon"></insurance-filled></div><div class="icon-text">InsuranceFilled</div></div>
		<div class="icon-cell" @click="clickIcon('interaction-filled')"><div class="icon-icon"><interaction-filled class="aut-icon"></interaction-filled></div><div class="icon-text">InteractionFilled</div></div>
		<div class="icon-cell" @click="clickIcon('layout-filled')"><div class="icon-icon"><layout-filled class="aut-icon"></layout-filled></div><div class="icon-text">LayoutFilled</div></div>
		<div class="icon-cell" @click="clickIcon('like-filled')"><div class="icon-icon"><like-filled class="aut-icon"></like-filled></div><div class="icon-text">LikeFilled</div></div>
		<div class="icon-cell" @click="clickIcon('lock-filled')"><div class="icon-icon"><lock-filled class="aut-icon"></lock-filled></div><div class="icon-text">LockFilled</div></div>
		<div class="icon-cell" @click="clickIcon('mac-command-filled')"><div class="icon-icon"><mac-command-filled class="aut-icon"></mac-command-filled></div><div class="icon-text">MacCommandFilled</div></div>
		<div class="icon-cell" @click="clickIcon('mail-filled')"><div class="icon-icon"><mail-filled class="aut-icon"></mail-filled></div><div class="icon-text">MailFilled</div></div>
		<div class="icon-cell" @click="clickIcon('medicine-box-filled')"><div class="icon-icon"><medicine-box-filled class="aut-icon"></medicine-box-filled></div><div class="icon-text">MedicineBoxFilled</div></div>
		<div class="icon-cell" @click="clickIcon('medium-circle-filled')"><div class="icon-icon"><medium-circle-filled class="aut-icon"></medium-circle-filled></div><div class="icon-text">MediumCircleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('medium-square-filled')"><div class="icon-icon"><medium-square-filled class="aut-icon"></medium-square-filled></div><div class="icon-text">MediumSquareFilled</div></div>
		<div class="icon-cell" @click="clickIcon('meh-filled')"><div class="icon-icon"><meh-filled class="aut-icon"></meh-filled></div><div class="icon-text">MehFilled</div></div>
		<div class="icon-cell" @click="clickIcon('message-filled')"><div class="icon-icon"><message-filled class="aut-icon"></message-filled></div><div class="icon-text">MessageFilled</div></div>
		<div class="icon-cell" @click="clickIcon('mobile-filled')"><div class="icon-icon"><mobile-filled class="aut-icon"></mobile-filled></div><div class="icon-text">MobileFilled</div></div>
		<div class="icon-cell" @click="clickIcon('money-collect-filled')"><div class="icon-icon"><money-collect-filled class="aut-icon"></money-collect-filled></div><div class="icon-text">MoneyCollectFilled</div></div>
		<div class="icon-cell" @click="clickIcon('notification-filled')"><div class="icon-icon"><notification-filled class="aut-icon"></notification-filled></div><div class="icon-text">NotificationFilled</div></div>
		<div class="icon-cell" @click="clickIcon('pay-circle-filled')"><div class="icon-icon"><pay-circle-filled class="aut-icon"></pay-circle-filled></div><div class="icon-text">PayCircleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('phone-filled')"><div class="icon-icon"><phone-filled class="aut-icon"></phone-filled></div><div class="icon-text">PhoneFilled</div></div>
		<div class="icon-cell" @click="clickIcon('picture-filled')"><div class="icon-icon"><picture-filled class="aut-icon"></picture-filled></div><div class="icon-text">PictureFilled</div></div>
		<div class="icon-cell" @click="clickIcon('play-square-filled')"><div class="icon-icon"><play-square-filled class="aut-icon"></play-square-filled></div><div class="icon-text">PlaySquareFilled</div></div>
		<div class="icon-cell" @click="clickIcon('pound-circle-filled')"><div class="icon-icon"><pound-circle-filled class="aut-icon"></pound-circle-filled></div><div class="icon-text">PoundCircleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('printer-filled')"><div class="icon-icon"><printer-filled class="aut-icon"></printer-filled></div><div class="icon-text">PrinterFilled</div></div>
		<div class="icon-cell" @click="clickIcon('profile-filled')"><div class="icon-icon"><profile-filled class="aut-icon"></profile-filled></div><div class="icon-text">ProfileFilled</div></div>
		<div class="icon-cell" @click="clickIcon('project-filled')"><div class="icon-icon"><project-filled class="aut-icon"></project-filled></div><div class="icon-text">ProjectFilled</div></div>
		<div class="icon-cell" @click="clickIcon('property-safety-filled')"><div class="icon-icon"><property-safety-filled class="aut-icon"></property-safety-filled></div><div class="icon-text">PropertySafetyFilled</div></div>
		<div class="icon-cell" @click="clickIcon('pushpin-filled')"><div class="icon-icon"><pushpin-filled class="aut-icon"></pushpin-filled></div><div class="icon-text">PushpinFilled</div></div>
		<div class="icon-cell" @click="clickIcon('qq-circle-filled')"><div class="icon-icon"><qq-circle-filled class="aut-icon"></qq-circle-filled></div><div class="icon-text">QqCircleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('qq-square-filled')"><div class="icon-icon"><qq-square-filled class="aut-icon"></qq-square-filled></div><div class="icon-text">QqSquareFilled</div></div>
		<div class="icon-cell" @click="clickIcon('read-filled')"><div class="icon-icon"><read-filled class="aut-icon"></read-filled></div><div class="icon-text">ReadFilled</div></div>
		<div class="icon-cell" @click="clickIcon('reconciliation-filled')"><div class="icon-icon"><reconciliation-filled class="aut-icon"></reconciliation-filled></div><div class="icon-text">ReconciliationFilled</div></div>
		<div class="icon-cell" @click="clickIcon('red-envelope-filled')"><div class="icon-icon"><red-envelope-filled class="aut-icon"></red-envelope-filled></div><div class="icon-text">RedEnvelopeFilled</div></div>
		<div class="icon-cell" @click="clickIcon('reddit-circle-filled')"><div class="icon-icon"><reddit-circle-filled class="aut-icon"></reddit-circle-filled></div><div class="icon-text">RedditCircleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('reddit-square-filled')"><div class="icon-icon"><reddit-square-filled class="aut-icon"></reddit-square-filled></div><div class="icon-text">RedditSquareFilled</div></div>
		<div class="icon-cell" @click="clickIcon('rest-filled')"><div class="icon-icon"><rest-filled class="aut-icon"></rest-filled></div><div class="icon-text">RestFilled</div></div>
		<div class="icon-cell" @click="clickIcon('robot-filled')"><div class="icon-icon"><robot-filled class="aut-icon"></robot-filled></div><div class="icon-text">RobotFilled</div></div>
		<div class="icon-cell" @click="clickIcon('rocket-filled')"><div class="icon-icon"><rocket-filled class="aut-icon"></rocket-filled></div><div class="icon-text">RocketFilled</div></div>
		<div class="icon-cell" @click="clickIcon('safety-certificate-filled')"><div class="icon-icon"><safety-certificate-filled class="aut-icon"></safety-certificate-filled></div><div class="icon-text">SafetyCertificateFilled</div></div>
		<div class="icon-cell" @click="clickIcon('save-filled')"><div class="icon-icon"><save-filled class="aut-icon"></save-filled></div><div class="icon-text">SaveFilled</div></div>
		<div class="icon-cell" @click="clickIcon('schedule-filled')"><div class="icon-icon"><schedule-filled class="aut-icon"></schedule-filled></div><div class="icon-text">ScheduleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('security-scan-filled')"><div class="icon-icon"><security-scan-filled class="aut-icon"></security-scan-filled></div><div class="icon-text">SecurityScanFilled</div></div>
		<div class="icon-cell" @click="clickIcon('setting-filled')"><div class="icon-icon"><setting-filled class="aut-icon"></setting-filled></div><div class="icon-text">SettingFilled</div></div>
		<div class="icon-cell" @click="clickIcon('shop-filled')"><div class="icon-icon"><shop-filled class="aut-icon"></shop-filled></div><div class="icon-text">ShopFilled</div></div>
		<div class="icon-cell" @click="clickIcon('shopping-filled')"><div class="icon-icon"><shopping-filled class="aut-icon"></shopping-filled></div><div class="icon-text">ShoppingFilled</div></div>
		<div class="icon-cell" @click="clickIcon('signal-filled')"><div class="icon-icon"><signal-filled class="aut-icon"></signal-filled></div><div class="icon-text">SignalFilled</div></div>
		<div class="icon-cell" @click="clickIcon('sketch-circle-filled')"><div class="icon-icon"><sketch-circle-filled class="aut-icon"></sketch-circle-filled></div><div class="icon-text">SketchCircleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('sketch-square-filled')"><div class="icon-icon"><sketch-square-filled class="aut-icon"></sketch-square-filled></div><div class="icon-text">SketchSquareFilled</div></div>
		<div class="icon-cell" @click="clickIcon('skin-filled')"><div class="icon-icon"><skin-filled class="aut-icon"></skin-filled></div><div class="icon-text">SkinFilled</div></div>
		<div class="icon-cell" @click="clickIcon('slack-circle-filled')"><div class="icon-icon"><slack-circle-filled class="aut-icon"></slack-circle-filled></div><div class="icon-text">SlackCircleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('smile-filled')"><div class="icon-icon"><smile-filled class="aut-icon"></smile-filled></div><div class="icon-text">SmileFilled</div></div>
		<div class="icon-cell" @click="clickIcon('sound-filled')"><div class="icon-icon"><sound-filled class="aut-icon"></sound-filled></div><div class="icon-text">SoundFilled</div></div>
		<div class="icon-cell" @click="clickIcon('star-filled')"><div class="icon-icon"><star-filled class="aut-icon"></star-filled></div><div class="icon-text">StarFilled</div></div>
		<div class="icon-cell" @click="clickIcon('switcher-filled')"><div class="icon-icon"><switcher-filled class="aut-icon"></switcher-filled></div><div class="icon-text">SwitcherFilled</div></div>
		<div class="icon-cell" @click="clickIcon('tablet-filled')"><div class="icon-icon"><tablet-filled class="aut-icon"></tablet-filled></div><div class="icon-text">TabletFilled</div></div>
		<div class="icon-cell" @click="clickIcon('tag-filled')"><div class="icon-icon"><tag-filled class="aut-icon"></tag-filled></div><div class="icon-text">TagFilled</div></div>
		<div class="icon-cell" @click="clickIcon('tags-filled')"><div class="icon-icon"><tags-filled class="aut-icon"></tags-filled></div><div class="icon-text">TagsFilled</div></div>
		<div class="icon-cell" @click="clickIcon('taobao-square-filled')"><div class="icon-icon"><taobao-square-filled class="aut-icon"></taobao-square-filled></div><div class="icon-text">TaobaoSquareFilled</div></div>
		<div class="icon-cell" @click="clickIcon('thunderbolt-filled')"><div class="icon-icon"><thunderbolt-filled class="aut-icon"></thunderbolt-filled></div><div class="icon-text">ThunderboltFilled</div></div>
		<div class="icon-cell" @click="clickIcon('tool-filled')"><div class="icon-icon"><tool-filled class="aut-icon"></tool-filled></div><div class="icon-text">ToolFilled</div></div>
		<div class="icon-cell" @click="clickIcon('trademark-circle-filled')"><div class="icon-icon"><trademark-circle-filled class="aut-icon"></trademark-circle-filled></div><div class="icon-text">TrademarkCircleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('trophy-filled')"><div class="icon-icon"><trophy-filled class="aut-icon"></trophy-filled></div><div class="icon-text">TrophyFilled</div></div>
		<div class="icon-cell" @click="clickIcon('twitter-circle-filled')"><div class="icon-icon"><twitter-circle-filled class="aut-icon"></twitter-circle-filled></div><div class="icon-text">TwitterCircleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('twitter-square-filled')"><div class="icon-icon"><twitter-square-filled class="aut-icon"></twitter-square-filled></div><div class="icon-text">TwitterSquareFilled</div></div>
		<div class="icon-cell" @click="clickIcon('unlock-filled')"><div class="icon-icon"><unlock-filled class="aut-icon"></unlock-filled></div><div class="icon-text">UnlockFilled</div></div>
		<div class="icon-cell" @click="clickIcon('usb-filled')"><div class="icon-icon"><usb-filled class="aut-icon"></usb-filled></div><div class="icon-text">UsbFilled</div></div>
		<div class="icon-cell" @click="clickIcon('video-camera-filled')"><div class="icon-icon"><video-camera-filled class="aut-icon"></video-camera-filled></div><div class="icon-text">VideoCameraFilled</div></div>
		<div class="icon-cell" @click="clickIcon('wallet-filled')"><div class="icon-icon"><wallet-filled class="aut-icon"></wallet-filled></div><div class="icon-text">WalletFilled</div></div>
		<div class="icon-cell" @click="clickIcon('zhihu-circle-filled')"><div class="icon-icon"><zhihu-circle-filled class="aut-icon"></zhihu-circle-filled></div><div class="icon-text">ZhihuCircleFilled</div></div>
		<div class="icon-cell" @click="clickIcon('zhihu-square-filled')"><div class="icon-icon"><zhihu-square-filled class="aut-icon"></zhihu-square-filled></div><div class="icon-text">ZhihuSquareFilled</div></div>
	</div>
	
	
</div>

</body>
<script>
const Main = {
data() {
	return {
		message: 'Hello Vue!!',
		iconIndex: "search",
	}
},
methods:{
	fn(){
		this.message = "欢迎来到HTML中文网。";
	},
	hello(par){
		this.message = "参数值为：" + par;
	},
	confirm4(){
		antd.Modal.confirm({
			title: 'Confirm',
			// icon: createVNode(ExclamationCircleOutlined),
			// icon: () => Vue.h(ElementPlusIconsVue.Grid, {class: "aut-icon"}),
			// icon: Vue.createVNode(DiyIconsVue.AddLocation, {class: "aut-icon"}),
			icon: Vue.createVNode(AntdIconsVue.QuestionCircleFilled, {class: "aut-icon"}),
			content: 'Bla bla ...',
			okText: '确认',
			cancelText: '取消',
			maskClosable: true,
		});
	},
	clickIcon(icon) {
		this.iconIndex = icon;
		// console.log(icon)
	},
	
},
computed:{
	iconDemo(){
		return `<${this.iconIndex} class="aut-icon"></${this.iconIndex}>`;
	}
},
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(DiyIconsVue)) {app.component(key, component)};
for (const [key, component] of Object.entries(AntdIconsVue)) {app.component(key, component)};
app.use(antd);
let vm = app.mount("#app");

// console.log(Object.keys(window));
// console.log(DiyIconsVue);
// console.log(AntdIconsVue);

// 如果从网站上获取：
// https://www.antdv.com/components/icon-cn/
// 实底风格==================================================  ==================================================
// document.getElementsByClassName('anticons-list')[0].children[0].lastChild.children[0].textContent		//'StepBackwardFilled'
// document.getElementsByClassName('anticons-list')[0].children[0].firstChild.firstChild.children[0].attributes.d.value		'M512 140c-205.4 0-372 166.6...'
// let n = 0;
// let arr_li = document.getElementsByClassName("anticons-list")[n].children;
// let ret = '';
// for(var li in arr_li){
// 	if(typeof arr_li[li] == 'object'){
// 		let name = arr_li[li].lastChild.children[0].textContent;
// 		let paths = arr_li[li].firstChild.firstChild.children;
// 		let str1 = `${name}: [`;
// 		let str2 = '';
// 		for(var path in paths){
// 			if(typeof paths[path] == 'object'){
// 				let fill = 'currentColor';
// 				let d_n = paths[path].attributes.d;
// 				if(d_n == undefined){
// 					continue;
// 				}
// 				let d = d_n.value;
// 				str2 = `${str2}
// 	{fill: "${fill}", d: "${d}"},`;
// 			}
// 		}
// 		let one_icon = `${str1}${str2.slice(0, -1)}
// ],`;
// 		ret = `${ret}
// ${one_icon}`;
// 	}
// }
// console.log(ret);

//获取第一个ul下的所有icon名称（转换为横杠方式）：“实底风格”
// let n = 0;
// let arr_li = document.getElementsByClassName("anticons-list")[n].children;
// function to_bar_name(str) {
// 	let result = '';for (let i = 0; i < str.length; i++) {const char = str[i];if (char === char.toUpperCase() && i !== 0) {result += '-';}result += char.toLowerCase();}
// 	return result;
// }
// let ret = '';
// for(var li in arr_li){
// 	if(typeof arr_li[li] == 'object'){
// 		let name = arr_li[li].lastChild.children[0].textContent;
// 		let name_bar = to_bar_name(name);
// 		ret = `${ret}
// <div class="icon-cell" @click="clickIcon('${name_bar}')"><div class="icon-icon"><${name_bar} class="aut-icon"></${name_bar}></div><div class="icon-text">${name}</div></div>`;
// 	}
// }
// console.log(ret);

</script>
</html>
